<template>
	<view class="order-pages">
		<!-- <fixed>
			<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex*1" :activeColor="primaryColor"
				:width="100/tabList.length + '%'" height="100rpx"></tab>
			<view class="b-1px-b"></view>
		</fixed> -->
		<!-- <view style="padding-bottom: 80rpx;"> -->
		
		<!-- 	<imageplayer :imageList="list" v-if="activeIndex == 0"></imageplayer>
		</view> -->
		
		<view  @tap.stop="goDetail(aitem)" class="flex-center item-child mt-sm ml-md mr-md pd-sm fill-base radius-16"
			v-for="(aitem,index) in sqdata" :key="index">
			
				<view class="flex-1 ml-md">
					<view >
						<image mode="aspectFill"  style="width: 100%; border-radius: 5px;" :src="aitem.avatar"></image>
						</view>
					<view class="flex-y-baseline mb-md">
						<view class="f-title c-title text-bold max-400 ellipsis">
							{{aitem.user_nicename}}
						</view>
						<view class="flex flex-center pl-sm">
							<image mode="aspectFill" class="cover radius mr-sm" style="width: 30rpx; height: 30rpx;" src="../static/common/icon_sex_female_1.png"></image>
							<image mode="aspectFill" class="cover radius mr-sm" style="width: 60rpx; height: 30rpx;" src="../static/common/new_level_anchor_1.png"></image>
						</view>
					</view>

					<view class="flex-y-center f-caption c-caption"><view class="ml-md">{{aitem.signature}}</view>
					</view>
				</view>
			
		</view>
		
		<!-- <view v-if="activeIndex == 3" @tap.stop="goTalkDetail(index,'detail')" class="flex-center item-child mt-sm ml-md mr-md pd-sm fill-base radius-16"
			v-for="(aitem,index) in list.data" :key="index"> -->
			<!-- <view class="flex-center mt-sm" v-for="(aitem,aindex) in item.order_goods" :key="aindex"> -->
				<!-- <view class="flex-1 ml-md">
					<view class="flex-y-baseline mb-md">
						<view class="f-title c-title text-bold max-400 ellipsis">
							{{aitem.title}}
						</view>
					</view>
		
					<view class="flex-y-center f-caption c-caption">24人参加了该话题<view class="ml-md">{{}}</view>
					</view>
				</view> -->
			<!-- </view> -->
		<!-- </view> -->

		<!-- <load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
		</load-more> -->
		<!-- <abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor> -->

		<!-- <view class="space-footer"></view> -->

		<!-- <view :style="{height: `${configInfo.tabbarHeight}px`}"></view> -->
		<tabbar :cur="1"></tabbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import tabbar from "@/components/tabbar.vue"
	import imageplayer from "../components/imageplayer.vue"
	export default {
		components: {
			tabbar,
			imageplayer
		},
		data() {
			return {
				options: {},
				loading: true,
				sqdata:[]
			}
		},
	
		async onLoad(options) {
		
			this.getList()
		},
	

		methods: {
			
			async getList(page = 0) {
			
				let that = this
				let param={
					p:1
				}
				let data = await this.$api.service.getAssocrecom(param)
				that.sqdata = data
				this.loading = false
				this.$util.hideAll()
			},
			handerTabChange(index) {
				this.updateAssocrecomItem({
					key: 'activeIndex',
					val: index
				})
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.$util.showLoading()
				this.getList(1)
			},
			// 详情
			goDetail(item) {
				
				let url = `/user/pages/user-detail?id=${item.id}`
				this.$util.goUrl({
					url
				})
			},
			// 话题详情
			goTalkDetail(index, page) {
				let {
					id
				} = this.list.data[index]
				let url = `/activity/pages/talk-detail?id=${id}`
				this.$util.goUrl({
					url
				})
			}
		}
	}
</script>


<style lang="scss">
	.list-item {
		.top-tag {
			width: 40rpx;
			height: 30rpx;
			color: #B75E1D;
			background: linear-gradient(90deg, #DFB885 0%, #FCE0AD 100%);
			border-radius: 8rpx 0 8rpx 0;
			top: 0;
			left: 0;
		}
	
		.item-img {
			width: 124rpx;
			height: 124rpx;
		}
	
	
		.top-img {
			width: 146rpx;
			height: 140rpx;
			top: -7rpx;
			left: -11rpx;
		}
	
		.hot-img {
			width: 75rpx;
			height: 51rpx;
			top: 77rpx;
			left: 25rpx;
		}
	
		.new-img {
			width: 38rpx;
			height: 52rpx;
			top: 83rpx;
			left: 78rpx;
		}
	
		.item-tag {
			width: 100rpx;
			height: 32rpx;
			color: #000;
			background: rgba(216, 216, 216, 0.3);
			margin-top: 19rpx;
			margin-bottom: 6rpx;
		}
	
		.item-tag.can-service {
			color: #EBDDB1;
			background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
		}
	
		.more-img {
			width: 104rpx;
			height: 33rpx;
			border-radius: 3px;
			transform: rotateZ(360deg);
		}
	
		.can-service-btn {
			width: 64rpx;
			height: 28rpx;
			margin-left: 8rpx;
	
			.bg {
				width: 64rpx;
				height: 28rpx;
				opacity: 0.1;
				border-radius: 3rpx;
				top: 0;
				left: 0;
				z-index: 1;
			}
	
			.text {
				width: 64rpx;
				height: 28rpx;
				top: 0;
				left: 0;
				z-index: 2
			}
		}
	
		.iconyduixingxingshixin {
			font-size: 28rpx;
			background-image: -webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%);
		}
	
		.star-text {
			color: #FF9519;
			margin-left: 6rpx;
		}
	
		.order-num {
			color: #4D4D4D;
			margin-left: 16rpx;
		}
	
		.item-btn {
			width: 130rpx;
			height: 52rpx;
			border-radius: 8rpx;
		}
	}
</style>
